<template>
  <div>
      <el-form :model="queryParams" inline style="text-align: left; position: relative;">
        <el-form-item label="填报日期">
          <el-date-picker
            v-model="queryParams.date"
            type="date"
            placeholder="请选择日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="姓名" v-if="$route.query.listForm !== 'personal'">
          <el-input v-model="queryParams.ename" placeholder="请输入姓名" clearable>
          </el-input>
        </el-form-item>
        <el-form-item label="审核状态" v-if="$route.query.listForm === 'personal'">
          <el-select v-model="queryParams.state" placeholder="请选择">
            <el-option label="未提交" value="0"></el-option>
            <el-option label="待审核" value="1"></el-option>
            <el-option label="已通过" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
        <el-form-item v-if="$route.query.listForm === 'check'" style="float: right;">
          <el-button type="primary" @click="passBatch">批量通过</el-button>
          <el-button @click="rejectBatch">批量驳回</el-button>
        </el-form-item>
      </el-form>

      <el-table
        :data="tableData"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
        height="444px"
      >
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="empno" label="员工号" width="100" align="center"></el-table-column>
        <el-table-column prop="ename" label="姓名" width="150" align="center"></el-table-column>
        <el-table-column prop="reportdate" label="填报日期" width="150" align="center"></el-table-column>
        <el-table-column prop="worktype" label="工作类型" width="100" align="center">
          <template slot-scope="scope">
            {{ mapWorkType(scope.row.worktype) }}
          </template>
        </el-table-column>
        <el-table-column prop="workload" label="工作量" width="100" align="center"></el-table-column>
        <el-table-column prop="pname" label="项目" min-width="150" align="center"></el-table-column>
        <el-table-column prop="state" label="状态" width="100" align="center">
          <template slot-scope="scope">
            {{ mapStatus(scope.row.state) }}
          </template>
        </el-table-column>
        <!-- 操作列 -->
        <el-table-column label="操作" width="240" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handleCheckStep(scope.row)"
            >
              查看流程
            </el-button>
            <el-button
              type="text"
              size="small"
              @click="handleCheckDetail(scope.row)"
              v-if="$route.query.listForm === 'check'"
            >
              审批
            </el-button>
            <el-button
              type="text"
              size="small"              
              @click="handleViewDetail(scope.row)"
              v-else
            >
              <div v-if="scope.row.state === 0">
                去提交
              </div>
              <div v-else>
                查看详情
              </div>
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        style="margin-top: 20px; text-align: right;"
        :current-page="parseInt(queryParams.page)"
        :page-size="parseInt(queryParams.limit)"
        :total="total"
        :page-sizes="[7, 10, 15, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>

    <report-form
      :visible.sync="detailVisible"
      dialog-title="报工详情"
      :form-type="formType"
      :report-data="currentDetail"
      @close="handleDetailClose"
    />

    <report-step
      :visible.sync="stepVisible"
      dialog-title="流程"
      :report-data="currentState"
      @close="handleStepClose"
    />
  </div>
</template>

<script>
import ReportStep from '@/components/ReportStep.vue';
import ReportForm from '../../components/ReportForm.vue'

export default {
  name: 'PersonalReport',
  components: {
    ReportForm,
    ReportStep
  },
  data() {
    return {
      queryParams: {
        page: '1',
        limit: '7',
        date: null,
        deptno: 1,
        empno: 0,
        ename: null,
        state: null
      },
      tableData: [],
      total: 0,
      formType: 'detail',
      checkedData: [],
      detailVisible: false,
      stepVisible: false,
      currentDetail: {},
      currentState: 0,
      projectOptions: []
    }
  },
  mounted() {
    this.queryParams.deptno = localStorage.getItem('deptno')
    this.queryParams.empno = localStorage.getItem('empno')
    this.getTableData()
  },
  methods: {
    getTableData() {
      let query = this.queryParams
      let url = '/getAllReport'
      if (this.$route.query.listForm === 'check') {
        url = '/getCheckReport'
      } else if (this.$route.query.listForm === 'dept') {
        query.empno = null
        query.state = 3
      }
      this.$http.post(url, query).then(res => {
        this.tableData = res.data.data
        this.total = res.data.count
      }).catch(() => {
        this.$message.warning('获取数据失败')
        this.tableData = []
        this.total = 0
      })
    },

    handleSearch() {
      this.queryParams.page = 1
      this.getTableData()
    },

    handleReset() {
      this.queryParams = {
        page: '1',
        limit: '7',
        date: null,
        deptno: localStorage.getItem('deptno'),
        empno: localStorage.getItem('empno'),
        ename: null
      }
      this.getTableData()
    },

    handleSizeChange(val) {
      this.queryParams.limit = val
      this.getTableData()
    },

    handleCurrentChange(val) {
      this.queryParams.page = val
      this.getTableData()
    },

    handleSelectionChange(val) {
      this.checkedData = val
    },

    handleCheckStep(row) {
      this.currentState = row.state
      this.stepVisible = true
    },

    handleCheckDetail(row) {
      this.currentDetail = row
      this.formType = 'detail'
      this.detailVisible = true
    },

    handleViewDetail(row) {
      this.currentDetail = row
      if (row.state === 0) {
        this.formType = 'resubmit'
      } else {
        this.formType = 'view'
      }
      this.detailVisible = true
    },

    handleDetailClose() {
      this.detailVisible = false
      this.currentDetail = {}
      this.getTableData()
    },

    handleStepClose() {
      this.stepVisible = false
      this.currentState = 0
    },

    // 工作类型映射 (0,1,2) => (上班,调休,请假)
    mapWorkType(type) {
      const workTypeMap = {
        '0': '上班',
        '1': '调休', 
        '2': '请假',
        0: '上班',
        1: '调休',
        2: '请假'
      }
      return workTypeMap[type]
    },

    mapStatus(status) {
      const statusMap = {
        '0': '未提交',
        '1': '审核中',
        '3': '已通过',
        0: '未提交',
        1: '审核中',
        3: '已通过'
      }
      return statusMap[status]
    },

    passBatch(){
      if(this.checkedData.length === 0){
        this.$message.warning('请至少选择一条数据')
        return
      }
      this.$confirm('确定要通过所选报工吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
        }).then(() => {
            let reportids = []
            for(let report of this.checkedData){
                reportids.push(report.reportid)
            }
            this.$http.post('/passBatch',reportids).then(res=>{
                if(res.data === 'success') {
                    this.$message.success('批量通过成功')
                    this.getTableData()
                } else {
                    this.$message.error('批量通过失败')
                }
            })
        }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消'
            })       
        })
    },

    rejectBatch(){
      if(this.checkedData.length === 0){
        this.$message.warning('请至少选择一条数据')
        return
      }
      this.$confirm('确定要驳回所选报工吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
        }).then(() => {
            let reportids = []
            for(let report of this.checkedData){
                reportids.push(report.reportid)
            }
            this.$http.post('/rejectBatch',reportids).then(res=>{
                if(res.data ==='success') {
                    this.$message.success('批量驳回成功')
                    this.getTableData()
                } else {
                    this.$message.error('批量驳回失败')
                }
            })
        }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消'
            })       
        })
    }
  }
}
</script>